<template>
	<div class="publicpageview">
		<div class="publicformview">
			<div class='left'>
				<el-button size="mini" type="primary" @click="isnewOne=true">添加新的一级分类</el-button>
				<el-table style="margin-top: 20px;" max-height='680px' :data="OneList" border fit highlight-current-row
					size="mini">

					<el-table-column align="center" label="序号" prop="classno">
						<template slot-scope="scope">
							<div @click="getClassmid(scope.row.classname)">
								{{scope.row.classno}}
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" label="分类名单" prop="classname">
						<template slot-scope="scope">
							<div @click="getClassmid(scope.row.classname)">
								{{scope.row.classname}}
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" label="明细数值名称">
						<template slot-scope="scope">
							<div @click="getClassmid(scope.row.classname)">
								{{scope.row.classdetailvaluename}}
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" label="是否数值">
						<template slot-scope="scope">
							<div @click="getClassmid(scope.row.classname)">
								{{scope.row.classdetailvalueisnumber==1?'是':'否'}}
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" label="中间分类允许修改">
						<template slot-scope="scope">
							<div @click="getClassmid(scope.row.classname)">
								{{scope.row.midallowedit==1?'是':'否'}}
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="delect(scope.row.classid,1)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 弹窗部分 -->
				<el-dialog :title="oneTitle" :visible.sync="isnewOne" width="50%" :before-close="handleClose">
					<el-form :model="newOne" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px">
						<el-form-item label="序号：" prop="classno">
							<el-input v-model="newOne.classno"></el-input>
						</el-form-item>
						<el-form-item label="分类名称：" prop="classname">
							<el-input v-model="newOne.classname"></el-input>
						</el-form-item>
						<el-form-item label="明细数值名称：" prop="classdetailvaluename">
							<el-input v-model="newOne.classdetailvaluename"></el-input>
						</el-form-item>
						<el-form-item label="是否数值：" prop="classdetailvalueisnumber">
							<el-select v-model="newOne.classdetailvalueisnumber">
								<el-option label="是" value="1"></el-option>
								<el-option label="否" value="0"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="中间分类允许修改：" prop="midallowedit">
							<el-select v-model="newOne.midallowedit">
								<el-option label="是" value="1"></el-option>
								<el-option label="否" value="0"></el-option>
							</el-select>
						</el-form-item>
					<!-- 	<el-form-item label="类型：" prop="kindid">
							<el-select v-model="newOne.kindid">
								<el-option label="产业" value="1"></el-option>
								<el-option label="经营" value="2"></el-option>
								<el-option label="售房" value="3"></el-option>
							</el-select>
						</el-form-item> -->
					</el-form>

					<div class="saveContent">
						<el-button type="primary" @click="oneSave" size="medium">保 存</el-button>
					</div>
				</el-dialog>
			</div>

			<div class="center" v-if="classname">
				<el-button size="mini" type="primary" @click="isnewTow=true">添加新的中级分类</el-button>
				<el-table style="margin-top: 20px;" max-height='680px' :data="TowList" border fit highlight-current-row
					size="mini">

					<el-table-column align="center" label="序号">
						<template slot-scope="scope">
							<div @click="getClassdetail(scope.row.classmid)">
								{{scope.row.sortno}}
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" label="二级分类">
						<template slot-scope="scope">
							<div @click="getClassdetail(scope.row.classmid)">
								{{scope.row.classmid}}
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" label="明细允许添加">
						<template slot-scope="scope">
							<div @click="getClassdetail(scope.row.classmid)">
								{{scope.row.detailallowadddelete==1?'是':'否'}}
							</div>
						</template>
					</el-table-column>

					<!-- <el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="TowDeta(scope.row)">修改</el-button>
						</template>
					</el-table-column> -->
					
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="delect(scope.row.classmidid,2)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 弹窗部分 -->
				<el-dialog :title="TowTitle" :visible.sync="isnewTow" width="50%" :before-close="handleClose">
					<el-form :model="newTow" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px">
						<el-form-item label="序号：" prop="sortno">
							<el-input v-model="newTow.sortno"></el-input>
						</el-form-item>
						<el-form-item label="二级分类：" prop="classmid">
							<el-input v-model="newTow.classmid"></el-input>
						</el-form-item>
						<el-form-item label="明细允许添加：" prop="detailallowadddelete">
							<el-select v-model="newTow.detailallowadddelete">
								<el-option label="是" value="1"></el-option>
								<el-option label="否" value="0"></el-option>
							</el-select>
						</el-form-item>
					<!-- 	<el-form-item label="类型：" prop="kindid">
							<el-select v-model="newTow.kindid">
								<el-option label="产业" value="1"></el-option>
								<el-option label="经营" value="2"></el-option>
								<el-option label="售房" value="3"></el-option>
							</el-select>
						</el-form-item> -->
					</el-form>

					<div class="saveContent">
						<el-button type="primary" @click="TowSave" size="medium">保 存</el-button>
					</div>
				</el-dialog>
			</div>

			<div class="right" v-if='classmid'>
				<el-button size="mini" type="primary" @click="isnewThree=true">添加新的明细分类</el-button>
				<el-table style="margin-top: 20px;" max-height='680px' :data="ThreeList" border fit highlight-current-row
					size="mini">

					<el-table-column align="center" label="序号">
						<template slot-scope="scope">
							<div>
								{{scope.row.sortno}}
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" label="三级分类">
						<template slot-scope="scope">
							<div>
								{{scope.row.detail}}
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" label="系数值">
						<template slot-scope="scope">
							<div>
								{{scope.row.value}}
							</div>
						</template>
					</el-table-column>

					<el-table-column align="center" label="明细锁定">
						<template slot-scope="scope">
							<div>
								{{scope.row.detaillock==1?'是':'否'}}
							</div>
						</template>
					</el-table-column>

					<!-- <el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="ThreesDeta(scope.row)">修改</el-button>
						</template>
					</el-table-column> -->
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="delect(scope.row.classdetailid,3)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 弹窗部分 -->
				<el-dialog :title="ThreeTitle" :visible.sync="isnewThree" width="50%" :before-close="handleClose">
					<el-form :model="newThree" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px">
						<el-form-item label="序号：" prop="sortno">
							<el-input v-model="newThree.sortno"></el-input>
						</el-form-item>
						<el-form-item label="三级分类：" prop="detail">
							<el-input v-model="newThree.detail"></el-input>
						</el-form-item>
						<el-form-item label="系数值：" prop="value">
							<el-input v-model="newThree.value"></el-input>
						</el-form-item>
						<el-form-item label="明细锁定：" prop="detaillock">
							<el-select v-model="newThree.detaillock">
								<el-option label="是" value="1"></el-option>
								<el-option label="否" value="0"></el-option>
							</el-select>
						</el-form-item>
					<!-- 	<el-form-item label="类型：" prop="kindid">
							<el-select v-model="newThree.kindid">
								<el-option label="产业" value="1"></el-option>
								<el-option label="经营" value="2"></el-option>
								<el-option label="售房" value="3"></el-option>
							</el-select>
						</el-form-item> -->
					</el-form>

					<div class="saveContent">
						<el-button type="primary" @click="ThreeSave" size="medium">保 存</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getDictionary,
		addDictionary,
		updateWordBook,
		getClassmid,
		addClassmid,
		getClassdetail,
		addClassdetail,
		delClass,
		getClassNewAll
	} from '@/api'
	export default {
		name: "zidianguanli",

		data() {
			return {
				classname: '',
				classmid:'',
				OneList: [],
				newOne: {
					classno: '',
					classname: '',
					classdetailvaluename: '',
					classdetailvalueisnumber: "",
					midallowedit: '',
					kindid:'1'
				},
				isnewOne: false,
				oneTitle: '添加',
				isnewTow: false,
				TowList: [],
				newTow: {
					sortno: '',
					classmid: '',
					detailallowadddelete: '',
					kindid:'1'
				},
				TowTitle: '添加',
				isnewThree: false,
				ThreeList: [],
				newThree: {
					sortno: '',
					detaillock: '',
					detail: '',
					value:'',
					kindid:'1'
				},
				ThreeTitle: '添加',
			};
		},

		computed: {},

		mounted() {
					this.getList()
		},

		methods: {
			// 一级
			getDictionary() {
				getDictionary().then(res => {
					console.log(res)
					this.OneList = res.data
				})
			},
			oneSave() {
				if (this.oneTitle == '添加') {
					this.addDictionary()
				} else {
					this.updateWordBook()
				}
			},
			addDictionary() {
				let data = this.newOne
				addDictionary(data).then(res => {
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.newOne.classid = '',
						this.newOne.classname = '',
						this.newOne.classdetailvaluename = '',
						this.newOne.classdetailvalueisnumber = '',
						this.newOne.midallowedit = '',
						this.classname= '',
						this.classmid= ''
					this.isnewOne = false
					this.getList()
				})
			},
			oneDeta(e) {
				console.log(e)
				let data = JSON.stringify(e)
				this.newOne = JSON.parse(data)
				this.oneTitle = '修改'
				this.isnewOne = true
			},
			updateWordBook() {
				let data = this.newOne
				updateWordBook(data).then(res => {
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.newOne.classid = '',
						this.newOne.classname = '',
						this.newOne.classdetailvaluename = '',
						this.newOne.classdetailvalueisnumber = '',
						this.newOne.midallowedit = '',
						this.classname= '',
						this.classmid= '',
					this.isnewOne = false
					this.getList()
				})
			},

			// 二级
			getClassmid(classname) {
				this.classname = classname
				let data = {
					classname: this.classname
				}
				getClassmid(data).then(res => {
					this.TowList = res.data
						this.classmid= ''
				})
			},
			TowSave() {
				if (this.TowTitle == '添加') {
					this.addClassmid()
				} else {
					this.updateWordBookTow()
				}
			},
			addClassmid() {
				let data = this.newTow
				data.classname = this.classname
				addClassmid(data).then(res => {
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.newTow.sortno = '',
						this.newTow.classmid = '',
						this.newTow.detailallowadddelete = '',
						this.classmid= ''
						this.getClassmid(this.classname)
					this.isnewTow = false
					this.getList()
				})
			},
			TowDeta(e) {
				console.log(e)
				let data = JSON.stringify(e)
				this.newTow = JSON.parse(data)
				this.TowTitle = '修改'
				this.isnewTow = true
			},
			updateWordBookTow() {
				let data = this.newTow
				updateWordBook(data).then(res => {
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.newTow.sortno = '',
						this.newTow.classmid = '',
						this.newTow.detailallowadddelete = '',
						this.classmid= ''
						this.getClassmid(this.classname)
					this.isnewTow = false
					this.getList()
				})
			},
			
			//三级
			getClassdetail(classmid) {
				this.classmid = classmid
				let data = {
					classname: this.classname,
					classmid:this.classmid
				}
				getClassdetail(data).then(res => {
					this.ThreeList = res.data
				})
			},
			ThreeSave() {
				if (this.ThreeTitle == '添加') {
					this.addClassdetail()
				} else {
					this.updateWordBookThree()
				}
			},
			addClassdetail() {
				let data = this.newThree
				data.classname = this.classname
				data.classmid = this.classmid
				addClassdetail(data).then(res => {
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					
					this.newThree.sortno = '',
						this.newThree.detaillock = '',
						this.newThree.detail = '',
						this.newThree.value = '',
						this.getClassdetail(this.classmid)
					this.isnewThree = false
					this.getList()
				})
			},
			ThreesDeta(e) {
				console.log(e)
				let data = JSON.stringify(e)
				this.newThree = JSON.parse(data)
				this.ThreeTitle = '修改'
				this.isnewThree = true
			},
			updateWordBookThree() {
				let data = this.newThree
				updateWordBook(data).then(res => {
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.newThree.sortno = '',
						this.newThree.detaillock = '',
						this.newThree.detail = '',
						this.newThree.value = '',
						this.getClassdetail(this.classmid)
					this.isnewThree = false
					this.getList()
				})
			},


			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
						this.newOne.classid = '',
							this.newOne.classname = '',
							this.newOne.classdetailvaluename = '',
							this.newOne.classdetailvalueisnumber = '',
							this.newOne.midallowedit = ''
					})
					.catch(_ => {});
			},
			delect(id,level){
				let data = {
					id:id,
					level:level
				}
				delClass(data).then(res=>{
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					if(level==1){
						this.classname= '',
						this.classmid= ''
					}else if(level==2){
						this.getClassmid(this.classname)
						this.classmid= ''
					}else if(level==3){
						this.getClassdetail(this.classmid)
					}
				})
			},
			getList(){
				getClassNewAll({kindId:1}).then(res=>{
					localStorage.setItem('chanye', JSON.stringify(res.data))
					this.OneList = res.data
				})
				// getClassNewAll({kindId:2}).then(res=>{
				// 	localStorage.setItem('jinying', JSON.stringify(res.data))
				// })
				// getClassNewAll({kindId:3}).then(res=>{
				// 	localStorage.setItem('shoufang', JSON.stringify(res.data))
				// })
			}
		},
	};
</script>
<style scoped>
	.publicformview {
		display: flex
	}

	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.left {
		width: 500px;
		height: 730px;
	}

	.center {
		width: 350px;
		height: 730px;
		margin-left: 10px;
	}

	.right {
		width: 500px;
		height: 730px;
		margin-left: 10px;
	}
</style>